<template>
  <div id="key-customer-policy-edit">
    <table class="table table-sm" v-if="inputing">
      <thead>
        <tr>
          <th class="text-center">政策编号</th>
          <th class="text-center">航司</th>
          <th class="text-center">舱位列表</th>
          <th class="text-center">大客户代码</th>
          <th class="text-center">外部备注</th>
          <th class="text-center">内部备注</th>
          <th class="text-center bg-success">生效日期</th>
          <th class="text-center bg-warning">失效日期</th>
          <th class="text-center">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="policyCode"
              size="10"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="carrier"
              size="5"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="subclasses"
              size="10"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="keyCustomerCode"
              size="10"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="publicMemo"
              size="10"
            />
          </td>
          <td>
            <input
              type="text"
              class="text-center form-control"
              v-model="privateMemo"
              size="10"
            />
          </td>
          <td>
            <my-date-picker
              id="effectDate"
              v-model="effectDate"
              placeholder="格式：yyyy-MM-dd"
            ></my-date-picker>
          </td>
          <td>
            <my-date-picker
              id="expireDate"
              v-model="expireDate"
              placeholder="格式：yyyy-MM-dd"
            ></my-date-picker>
          </td>
          <td>
            <select class="form-select" v-model.number="status">
              <option value="0">停用</option>
              <option value="1">启用</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="form-check" v-if="id === 0">
              <input
                type="checkbox"
                class="form-check-input"
                v-model="keepInputing"
              />
              <label class="form-check-label">继续录入</label>
            </div>
          </td>
          <td colspan="6">
            <button
              type="button"
              class="btn btn-primary"
              v-on:click="savePolicy()"
            >
              保存
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-5"
              v-on:click="closeInput()"
            >
              关闭
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import MyDatePicker from "@/components/my-datepicker.vue";
import $ from "jquery";
import {
  searchKeyCustomerPolicies,
  saveKeyCustomerPolicy,
} from "@/api/basic-data";

export default {
  components: {
    MyDatePicker,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      carrier0: "",
      subclass0: "",

      id: 0,
      policyCode: "",
      carrier: "",
      subclasses: "",
      keyCustomerCode: "",
      whiteList: -1,
      publicMemo: "",
      privateMemo: "",
      effectDate: "",
      expireDate: "",
      status: 1,

      dataList: [],

      keepInputing: false,
      inputing: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    quickSearch: function (carrier) {
      this.carrier0 = carrier;
      this.search();
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.carrier": this.carrier0,
        "sc.subclass": this.subclass0,
      };
      searchKeyCustomerPolicies(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    reset: function () {
      this.id = 0;
      this.policyCode = "";
      this.carrier = "";
      this.subclasses = "";
      this.keyCustomerCode = "";
      this.whiteList = -1;
      this.publicMemo = "";
      this.privateMemo = "";
      this.effectDate = "";
      this.expireDate = "";
      this.status = 1;
    },
    newPolicy: function () {
      this.reset();
      this.inputing = true;
    },
    editPolicy: function (index) {
      const info = this.dataList[index];

      this.id = info.id;
      this.policyCode = info.policyCode;
      this.carrier = info.carrier;
      this.subclasses = info.subclasses;
      this.publicMemo = info.publicMemo;
      this.privateMemo = info.privateMemo;
      this.keyCustomerCode = info.keyCustomerCode;
      this.whiteList = info.whiteList;
      this.effectDate = info.effectDate;
      this.expireDate = info.expireDate;
      this.status = info.status;

      this.keepInputing = false;

      this.inputing = true;
    },
    closeInput: function () {
      this.inputing = false;
    },
    savePolicy: function () {
      const params = {
        id: this.id,
        policyCode: this.policyCode,
        carrier: this.carrier,
        subclasses: this.subclasses,
        keyCustomerCode: this.keyCustomerCode,
        publicMemo: this.publicMemo,
        privateMemo: this.privateMemo,
        effectDate: this.effectDate,
        expireDate: this.expireDate,
        status: this.status,
      };

      saveKeyCustomerPolicy(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          if (this.keepInputing === false) {
            // $('#modalNew').modal('hide')
            this.inputing = false;
          }

          this.search();
          this.showErrMsg("保存成功");
        } else {
          this.showErrMsg(jsonResult.errmsg);
        }
      });
    },
    showStatus: function (status) {
      if (status == 0) {
        return "停用";
      } else if (status === 1) {
        return "启用";
      }
    },
    resetSearch: function () {
      this.carrier0 = "";
      this.subclass0 = "";

      this.sc.pageNo = 1;
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
